<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>中国地图标记天安门</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        canvas {
            border: 1px solid #ccc;
            max-width: 100%;
            height: auto;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
<h1>中国地图 - 天安门位置标记</h1>
<canvas id="mapCanvas" width="1000" height="600"></canvas>

<script>
    const canvas = document.getElementById('mapCanvas');
    const ctx = canvas.getContext('2d');

    // 🌍 1. 定义地图的地理边界（必须已知）
    const mapBounds = {
        north: 53.5,  // 左上角纬度
        south: 3.8,   // 右下角纬度
        west: 73.5,   // 左上角经度
        east: 135.0   // 右下角经度
    };

    // 📍 2. 天安门的经纬度
    const tiananmen = {
        lat: 39.903741,
        lng: 116.397258
    };

    // 🖼️ 3. 加载地图图片
    const mapImage = new Image();
    // 使用一张公开的中国地图示例（请确保可访问）
    // mapImage.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/China_location_map.svg/1200px-China_location_map.svg.png';
    mapImage.src = './china.png';

    mapImage.onload = function () {
        // 绘制地图到 canvas
        ctx.drawImage(mapImage, 0, 0, canvas.width, canvas.height);

        // 🔄 4. 将经纬度转换为像素坐标
        const pixelX = longitudeToX(tiananmen.lng);
        const pixelY = latitudeToY(tiananmen.lat);

        // 🎯 5. 在天安门位置绘制标记
        drawMarker(pixelX, pixelY, '天安门');
    };

    // 经度 -> X 像素
    function longitudeToX(lng) {
        const x = (lng - mapBounds.west) / (mapBounds.east - mapBounds.west) * canvas.width;
        return Math.max(0, Math.min(x, canvas.width)); // 限制在画布范围内
    }

    // 纬度 -> Y 像素（注意：纬度越高，Y 越小）
    function latitudeToY(lat) {
        const y = (1 - (lat - mapBounds.south) / (mapBounds.north - mapBounds.south)) * canvas.height;
        return Math.max(0, Math.min(y, canvas.height)); // 限制在画布范围内
    }

    // 绘制标记
    function drawMarker(x, y, label) {
        ctx.beginPath();
        ctx.arc(x, y, 6, 0, 2 * Math.PI); // 红色圆点
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 2;
        ctx.stroke();

        // 添加文字标签
        ctx.font = 'bold 14px Arial';
        ctx.fillStyle = 'red';
        ctx.textAlign = 'left';
        ctx.fillText(label, x + 10, y + 5);
    }
</script>
</body>
</html>
